<!DOCTYPE html>
<html>
<head>
    <title>Keyboard navigation</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example" class="k-content">
    <div class="demo-section">
        <ul id="treeview" tabindex="1" accesskey="w">
            <li>Furniture
                <ul>
                    <li>Tables &amp; Chairs</li>
                    <li>Sofas</li>
                    <li>Occasional Furniture</li>
                    <li>Childerns Furniture</li>
                    <li>Beds</li>
                </ul>
            </li>
            <li data-expanded="true">Decor
                <ul>
                    <li>Bed Linen</li>
                    <li>Throws</li>
                    <li>Curtains &amp; Blinds</li>
                    <li>Rugs</li>
                    <li>Carpets</li>
                </ul>
            </li>
            <li>Storage
                <ul>
                    <li>Wall Shelving</li>
                    <li>Kids Storage</li>
                    <li>Baskets</li>
                    <li>Multimedia Storage</li>
                    <li>Floor Shelving</li>
                    <li>Toilet Roll Holders</li>
                    <li>Storage Jars</li>
                    <li>Drawers</li>
                    <li>Boxes</li>
                </ul>
            </li>
        </ul>
    </div>

    <ul class="keyboard-legend">
        <li>
            <span class="button-preview">
                <span class="key-button leftAlign wider">Alt</span>
                +
                <span class="key-button">w</span>
            </span>
            <span class="button-descr">
                focuses the widget
            </span>
        </li>
    </ul>

    <ul class="keyboard-legend">
        <li>
            <span class="button-preview">
                <span class="key-button wider leftAlign">up arrow</span>
            </span>
            <span class="button-descr">
                highlights previous item
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button wider leftAlign">left arrow</span>
            </span>
            <span class="button-descr">
                collapses the item
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button wider leftAlign">down arrow</span>
            </span>
            <span class="button-descr">
                highlights next item
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button wider leftAlign">right arrow</span>
            </span>
            <span class="button-descr">
                expands the item
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button">home</span>
            </span>
            <span class="button-descr">
                highlights first item in the list
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button">end</span>
            </span>
            <span class="button-descr">
                highlights last item in the list
            </span>
        </li>
        <li>
            <span class="button-preview">
                <span class="key-button wider rightAlign">enter</span>
            </span>
            <span class="button-descr">
                selects highlighted item
            </span>
        </li>
    </ul>


    <script>
        $(document).ready(function() {
            $("#treeview").kendoTreeView();

            //focus the widget
            $(document).on("keydown.examples", function(e) {
                if (e.altKey && e.keyCode === 87 /* w */) {
                    $("#treeview").data("kendoTreeView").wrapper.focus();
                }
            });
        });
    </script>

    <style scoped>
        .demo-section {
            width: 200px;
        }
    </style>
</div>

</body>
</html>
